<template>
  <view class="login-container">
    <!-- 标题区域 -->
    <view class="title-area">
      <text class="main-title">智慧农业助手</text>
      <text class="sub-title">走进智慧农业，创建幸福生活</text>
    </view>
    
    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- 登录方式切换 -->
      <view class="login-tabs">
        <view class="tab active">
          <text>账号密码登录</text>
          <view class="active-line"></view>
        </view>
        <view class="tab">
          <text>手机验证码登录</text>
        </view>
      </view>
      
      <!-- 登录表单 -->
      <view class="login-form">
        <!-- 用户名/手机号输入框 -->
        <view class="input-wrapper">
          <view class="icon-box">
            <uni-icons type="person" size="20" color="#999" />
          </view>
          <input 
            type="text" 
            v-model="loginForm.username" 
            placeholder="请输入用户名/手机号" 
            placeholder-style="color: #999;"
          />
        </view>
        
        <!-- 密码输入框 -->
        <view class="input-wrapper">
          <view class="icon-box">
            <uni-icons type="locked" size="20" color="#999" />
          </view>
          <input 
            type="password" 
            v-model="loginForm.password" 
            placeholder="请输入密码" 
            placeholder-style="color: #999;"
          />
        </view>
        
        <!-- 登录按钮 -->
        <button class="login-btn" @click="handleLogin">登 录</button>
      </view>
    </view>
    
    <!-- 第三方登录 -->
    <view class="third-party-login">
      <text class="third-party-title">使用第三方账号登录</text>
      <view class="third-party-icons">
        <view class="icon-item qq">
          <text>Q</text>
        </view>
        <view class="icon-item wechat">
          <text>W</text>
        </view>
        <view class="icon-item weibo">
          <text>微</text>
        </view>
      </view>
      <view class="quick-login">
        <text>没有账号?</text>
        <text class="quick-login-link">手机号快捷登录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 移除了错误的导入语句 - uni是全局对象，不需要导入

// 登录表单数据
const loginForm = ref({
  username: '',
  password: ''
});

// 登录方法
const handleLogin = () => {
  if (!loginForm.value.username) {
    uni.showToast({
      title: '请输入用户名/手机号',
      icon: 'none'
    });
    return;
  }
  
  if (!loginForm.value.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    });
    return;
  }
  
  // 这里添加登录逻辑
  console.log('登录信息:', loginForm.value);
  
  // 模拟登录请求
  uni.showLoading({
    title: '登录中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
    
    // 登录成功后跳转到首页
    // uni.switchTab({
    //   url: '/pages/index/index'
    // });
  }, 1500);
};
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #e6f7ff, #f0f9ff);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30rpx;
}

.title-area {
  margin-top: 100rpx;
  text-align: center;
  margin-bottom: 60rpx;
  
  .main-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #3cb9a0;
    display: block;
  }
  
  .sub-title {
    font-size: 28rpx;
    color: #3cb9a0;
    margin-top: 20rpx;
    display: block;
  }
}

.login-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 40rpx;
  box-sizing: border-box;
}

.login-tabs {
  display: flex;
  margin-bottom: 40rpx;
  
  .tab {
    position: relative;
    margin-right: 30rpx;
    padding-bottom: 10rpx;
    color: #999;
    font-size: 28rpx;
    
    &.active {
      color: #3cb9a0;
      font-weight: 500;
      
      .active-line {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4rpx;
        background-color: #3cb9a0;
      }
    }
  }
}

.login-form {
  .input-wrapper {
    display: flex;
    align-items: center;
    height: 90rpx;
    margin-bottom: 30rpx;
    border: 1px solid #e0e0e0;
    border-radius: 10rpx;
    
    .icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
    }
    
    input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      padding-right: 20rpx;
    }
  }
  
  .login-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #3cb9a0;
    color: #ffffff;
    font-size: 32rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
    border: none;
    
    &:active {
      background-color: #35a08c;
    }
  }
}

.third-party-login {
  margin-top: 80rpx;
  text-align: center;
  
  .third-party-title {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 30rpx;
    display: block;
  }
  
  .third-party-icons {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
    
    .icon-item {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 20rpx;
      color: #ffffff;
      font-size: 32rpx;
      
      &.qq {
        background-color: #4EACEA;
      }
      
      &.wechat {
        background-color: #3CB034;
      }
      
      &.weibo {
        background-color: #E6162D;
      }
    }
  }
  
  .quick-login {
    font-size: 26rpx;
    color: #666;
    
    .quick-login-link {
      color: #4EACEA;
      margin-left: 10rpx;
    }
  }
}
</style>